<template>
	<view class="indexBox">
		<view class="logo">
			<u-icon name="map" color="#fff" size="25"></u-icon>
			<image src="../../static/images/logo.png"></image>
			<u-search placeholder="请输入搜索的关键词" v-model="keyword" :showAction='false' @search="toList"
				shape="square"></u-search>
			<u-icon name="bag-fill" color="#fff" size="30"></u-icon>
		</view>
		<!-- 一级导航 -->
		<view class="oneNavList">
			<u-tabs :list="navList" @click="goList" lineColor='#fff' keyName="catename" :activeStyle="{
			color: '#fff',
			fontWeight: 'bold',
			transform: 'scale(1.05)' }" :inactiveStyle="{color:' #fff'}" itemStyle="flex-grow:1;margin-bottom:20rpx"
				class="listBox"></u-tabs>
		</view>
		<!-- 轮播图 -->
		<view class="u-demo-block">
			<u-swiper :list="bannberList" previousMargin="30" nextMargin="30" height="200" circular radius="5"
				@change="e => current = e.current" :indicator=true bgColor="#ffffff" indicatorActiveColor='#fff'
				indicatorInactiveColor="#ccc">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in bannberList" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>

			</u-swiper>
		</view>
		<!-- 限时秒杀 -->
		<view class="seckillBox">
			<u-grid :border="false" col="5">
				<u-grid-item>
					<image src="../../static/images/限时抢购.png" mode=""></image>
					<text class="grid-text">限时秒杀</text>
				</u-grid-item>
				<u-grid-item>
					<image src="../../static/images/畅销商品.png" mode=""></image>
					<text class="grid-text">畅销商品</text>
				</u-grid-item>
				<u-grid-item>
					<image src="../../static/images/品质大牌.png" mode=""></image>
					<text class="grid-text">品质大牌</text>
				</u-grid-item>
				<u-grid-item>
					<image src="../../static/images/小u自营.png" mode=""></image>
					<text class="grid-text">小U自营</text>
				</u-grid-item>
				<u-grid-item>
					<image src="../../static/images/积分兑换.png" mode=""></image>
					<text class="grid-text">积分商城</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<!-- 品牌上新 -->
		<view class="advertising inner">
			<view class="advertising_left">
				<view class="time"><text>00</text>:<text>00</text>:<text>00</text></view>
				<view class="img">
					<image src="../../static/images/13.jpg" alt="" />
				</view>
				<view>查看更多<text>></text></view>
			</view>
			<view class="advertising_right">
				<view class="advertising_right_top">
					<view class="textBox">
						<view class="title">品牌上新</view>
						<view>9点整,抢大牌</view>
						<text>疯抢红包 ></text>
					</view>
				</view>
				<view class="advertising_right_bottom">
					<view class="textBox">
						<view class="title">日用好物</view>
						<view>愿君多采撷</view>
						<text>塞满奖券 ></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 双十一 -->
		<view class="bothBox">
			<view class="both">
				<view style="font-size: 40rpx; color: orangered;">双11尖货订购</view>
				<view>畅购全球</view>
			</view>
			<view class="both_image">
				<image src="../../static/images/底1.png" mode=""></image>
				<image src="../../static/images/底2.png" mode=""></image>
				<image src="../../static/images/底3.png" mode=""></image>
				<image src="../../static/images/底4.png" mode=""></image>
			</view>
		</view>
		<!-- 热推商品 -->
		<view class="commodity inner">
			<view class="commodity_nav">
				<a href="javascript:;" :class=" isgoodsshow==1?'active':'' " @click="hotgoods">
					热门推荐
				</a>
				<a href="javascript:;" :class="isgoodsshow==2?'active':''" @click="newgoods">
					上新推荐
				</a>
				<a href="javascript:;" :class="isgoodsshow==3?'active':''" @click="allgoods">
					所有商品
				</a>
			</view>
			<view class="particulars" v-show="isgoodsshow==1">
				<view v-for="(item,index) in listComputer" @click="goDeatil" class="goodsBox" :data-id="item.id">
					<!-- <view class="goodsBox">
					
				</view> -->
					<view class="imgBox">
						<image :src="item.img" alt="">
					</view>
					<view>
						<view class='goodsTitle'>{{item.goodsname}}</view>
						<view class="goodsPrice">现价格:￥{{item.price}}</view>
						<text class="marketPrice">原价格:￥{{item.market_price}}</text>
						<text class="play">立即购买</text>
					</view>
				</view>

			</view>
			<view class="particulars" v-show="isgoodsshow==2">
				<view v-for="(item,index) in listComputer1">

					<view class="imgBox">
						<image :src="item.img" alt="">
					</view>
					<view>
						<view class='goodsTitle'>{{item.goodsname}}</view>
						<view class="goodsPrice">现价格:￥{{item.price}} </view>
						<text class="marketPrice">原价格:￥{{item.market_price}}</text>
						<text>立即购买</text>
					</view>

				</view>

			</view>
			<view class="particulars" v-show="isgoodsshow==3">
				<view v-for="(item,index) in listComputer2">

					<view class="imgBox">
						<image :src="item.img" alt="">
					</view>

					<view>
						<view class='goodsTitle'>{{item.goodsname}}</view>
						<view class="goodsPrice">现价格:￥{{item.price}}</view>
						<text class="marketPrice">原价格:￥{{item.market_price}}</text>
						<text class="play">立即购买</text>
					</view>

				</view>


			</view>
		</view>
	</view>
</template>

<script>
	// import toFixed from '../../common/toFixed.js';
	// toFixed(2)
	export default {
		data() {
			return {
				isgoodsshow: 1,
				title: 'Hello',
				keyword: '', //搜索关键词
				current: 0, //轮播图初始下标
				navList: [], //一级导航分类名字
				bannberList: [], //轮播图数据
				listComputer: [], //热推
				listComputer1: [], //上新
				listComputer2: [], //所有

			}
		},
		onLoad() {

			this.getCate();
			this.getbanner();
			this.gethortgoods();

			// this.$toFixed(20)
			// console.log(this.$toFixed());
		},
		onShow() {
			// 判断是否登录  登录显示我的  否则未登录
			if (uni.getStorageSync('userInfo')) {
				// 更改tabbar
				uni.setTabBarItem({
					index: 3,
					text: '我的'
				})
			} else {
				// 更改tabbar
				uni.setTabBarItem({
					index: 3,
					text: '未登录'
				})
			}
		},
		methods: {
			// 搜索
			toList() {
				// console.log(this.keyword);
				uni.navigateTo({
					url: '/pages/list/list?keyword=' + this.keyword
				})
			},
			// 点击一级分类 跳转列表页
			goList(item) {
				console.log('item', item);
				uni.navigateTo({
					url: '../list/list?type=1&cateid=' + item.id
				})
			},
			// 获取一级导航分类
			getCate() {
				this.$http({
					url: '/getcate'
				}).then(res => {
					this.navList = res.data.list
				})
			},
			// 获取轮播图数据
			getbanner() {
				this.$http({
					url: '/getbanner'
				}).then(res => {
					res.data.list.forEach(item => {
						this.bannberList.push(this.$baseUrl + item.img);
					})
				})
			},
			// 获取热推商品
			gethortgoods() {
				this.$http({
					url: '/gethortgoods'
				}).then(res => {
					console.log(res.data.list);
					this.listComputer = res.data.list[0].content;
					this.listComputer1 = res.data.list[1].content;
					this.listComputer2 = res.data.list[2].content;
					this.listComputer.forEach(item => {
						item.img = this.$baseUrl + item.img
					})
					this.listComputer1.forEach(item => {
						item.img = this.$baseUrl + item.img
					})
					this.listComputer2.forEach(item => {
						item.img = this.$baseUrl + item.img
					})


				})
				console.log(this.listComputer);
			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			// 点击热门推荐
			hotgoods() {
				this.isgoodsshow = 1;
			},
			// 点击上新商品列表
			newgoods() {
				this.isgoodsshow = 2;
			},
			// 点击全部商品列表
			allgoods() {
				this.isgoodsshow = 3;
			},
			// 点击热推商品 跳转详情
			goDeatil(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.logo {
		display: flex;
		height: 80rpx;
		align-items: center;
		font-size: 20rpx;
		padding: 10rpx 15rpx;
		box-sizing: border-box;
		background-color: #ff6040;
	}

	.logo image {
		width: 200rpx;
		height: 60rpx;
		margin: 0rpx 20rpx;
	}

	.oneNavList {
		// height: 50rpx;
		background-color: #ff6040;
		padding: 15rpx 0;
		box-sizing: border-box;
	}

	.u-demo-block {
		margin-top: 20rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.seckillBox {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		margin: 20rpx 0;
		padding-top: 10rpx;
		color: #000;
	}

	.seckillBox image {
		width: 50rpx;
		height: 50rpx;
	}

	.advertising {
		width: 100%;
		display: flex;
		height: 350rpx;
		justify-content: space-around;
	}

	.advertising_left {
		width: 47%;
		height: 360rpx;
		// background-color: #5c7f3b;
		background: url("../../static/images/图1.png");
		position: relative;

		.time {
			position: absolute;
			top: 20rpx;
			left: 20rpx;

			text {
				background-color: #5c7f3b;
				color: #fff;
				padding: 10rpx 5rpx;
				font-size: 20rpx;
				border-radius: 3rpx;
				margin: 0 5rpx;
			}
		}

		text {
			background-color: #5c7f3b;
			color: #fff;
			padding: 8rpx 4rpx;
			font-size: 20rpx;
			border-radius: 3rpx;
			margin: 0 5rpx;
		}


		view {
			font-size: 20rpx;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.advertising_left image {
		border-radius: 50%;
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top: 100rpx;
		left: -310rpx;
	}

	.advertising_right {
		width: 47%;
		height: 350rpx;
		box-sizing: border-box;

		text {
			color: #fff;
			font-size: 20rpx;
			line-height: 20rpx;
			padding: 0 25rpx;
			background: linear-gradient(#fa502d, #fe9575);
			border-radius: 0 20rpx 20rpx 0;
		}
	}

	.advertising_right_top {
		// background-color: pink;
		background: url("../../static/images/图2.png");
		width: 100%;
		height: 170rpx;
		padding-top: 5rpx;

		view {
			color: #ff6040;
			margin: 20rpx 10rpx;
			font-size: 20rpx;
		}

		.title {
			color: #ff6040;
			font-weight: bolder;
			margin: 20rpx 10rpx;
			font-size: 20rpx;
		}
	}

	.advertising_right_bottom {
		background: url("../../static/images/图3.png");
		width: 100%;
		height: 170rpx;
		margin-top: 10rpx;
		padding-top: 5rpx;

		view {
			color: #ff6040;
			margin: 20rpx 10rpx;
			font-size: 20rpx;
		}

		.title {
			color: #ff6040;
			font-weight: bolder;
			margin: 20rpx 10rpx;
			font-size: 20rpx;
		}
	}

	.bothBox {
		background-color: #fff;
	}

	.both {
		display: flex;
		justify-content: space-around;
		height: 80rpx;

	}

	.both view {
		line-height: 80rpx;
	}

	.both_image image {
		width: 170rpx;
		height: 170rpx;
		margin-left: 15rpx;
	}

	.commodity {
		width: 100%;
		background-color: #ffffff;
		margin-top: 20rpx;

	}

	.commodity_nav {
		display: flex;
		justify-content: space-between;
		flex-grow: 1;

	}

	.commodity_nav a {
		display: block;
		width: 224rpx;
		height: 70rpx;
		background-color: #ffffff;
		font-size: 30rpx;
		color: #f5a906;
		text-align: center;
		line-height: 70rpx;
		border-radius: 5rpx 0 0 5rpx;
	}

	.commodity_nav .active {
		background-color: #ffa500;
		color: #fffbfa;
		font-weight: bold;

	}

	.particulars .goodsBox {
		display: block;
		width: 95%;
		height: 330rpx;
		border: 1rpx solid #ececec;
		background-color: #ffffff;
		box-shadow: 5rpx 10rpx 15rpx #d7d7d7;
		margin: 0 0 22rpx 20rpx;
		display: flex;
		padding-top: 50rpx;
		box-sizing: border-box;

	}

	.particulars>.imgBox {
		width: 200rpx;
		height: 200rpx;
	}

	.particulars image {
		width: 200rpx;
		height: 200rpx;
		margin: 20rpx;

	}

	.particulars view {
		// padding-left: 10rpx;
	}

	.particulars .goodsTitle {
		font-size: 28rpx;
		color: #110000;
		margin: 8rpx 0rpx;
		// margin: 8rpx 22rpx;
	}

	.particulars .goodsPrice {
		font-size: 28rpx;
		color: #fe0002;
		margin: 8rpx 0rpx;

	}

	.particulars .marketPrice {
		display: block;
		font-size: 25rpx;
		color: #bdbdbd;
		margin: 22rpx 0rpx;
		// background-color: #ffa300;
	}

	.particulars .play {
		display: block;
		font-size: 28rpx;
		color: #f8ffff;
		background-color: #ffa300;
		width: 160rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;

	}

	.particulars {
		margin-top: 20rpx;
		// padding-bottom: 120rpx;
		padding-bottom: 10rpx;
		box-sizing: border-box;
	}
</style>